<template>
  <a-modal
    v-model:open="visible"
    title="挂账"
    width="500px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="credit-modal">
      <!-- 挂账信息 -->
      <div class="credit-info">
        <a-form :model="formData" layout="vertical">
          <a-form-item label="挂账金额">
            <a-input
              :value="`¥${bill?.totalAmount.toFixed(2) || '0.00'}`"
              readonly
              style="width: 100%"
            />
          </a-form-item>

          <a-form-item label="顾客姓名">
            <a-input :value="bill?.ownerName" readonly style="width: 100%" />
          </a-form-item>

          <a-form-item label="联系方式">
            <a-input :value="bill?.ownerPhone" readonly style="width: 100%" />
          </a-form-item>

          <a-form-item label="操作人员" required>
            <a-select
              v-model:value="formData.operator"
              placeholder="请选择挂账人员"
              style="width: 100%"
            >
              <a-select-option value="曾前台">曾前台</a-select-option>
              <a-select-option value="李收银">李收银</a-select-option>
              <a-select-option value="王收银">王收银</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="挂账说明" required>
            <a-textarea
              v-model:value="formData.description"
              :rows="3"
              placeholder="请输入挂账说明"
            />
          </a-form-item>

          <a-form-item label="计划到账">
            <a-date-picker
              v-model:value="formData.dueDate"
              style="width: 100%"
              placeholder="请选择计划到账日期"
            />
          </a-form-item>

          <a-form-item>
            <a-checkbox v-model:checked="formData.enableReminder">
              到期提醒
            </a-checkbox>
            <div class="reminder-hint">*系统将在挂账到期当天为您发送提醒</div>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

// 接口定义
interface BillItem {
  id: string;
  name: string;
  specification: string;
  unit: string;
  quantity: number;
  unitPrice: number;
  discountedPrice: number;
  total: number;
  salesPerson: string;
  servicePerson: string;
  category: string;
  date: string;
}

interface Bill {
  id: string;
  petName: string;
  petId: string;
  ownerName: string;
  ownerPhone: string;
  createTime: string;
  status: 'unsettled' | 'onAccount' | 'settled' | 'refund';
  totalAmount: number;
  items: BillItem[];
}

interface Props {
  visible: boolean;
  bill: Bill | null;
}

interface Emits {
  (e: 'update:visible',value: boolean): void;
  (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 响应式数据
const formData = ref({
  operator: '',
  description: '',
  dueDate: dayjs().add(7, 'day'),
  enableReminder: true,
});

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 方法
const handleOk = () => {
  if (!formData.value.operator) {
    message.warning('请选择挂账人员');
    return;
  }

  if (!formData.value.description) {
    message.warning('请填写挂账说明');
    return;
  }

  message.success('挂账成功');
  emit('success');
  emit('update:visible', false);
  resetForm();
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};

const resetForm = () => {
  formData.value = {
    operator: '',
    description: '',
    dueDate: dayjs().add(7, 'day'),
    enableReminder: true,
  };
};
</script>

<style scoped>
.credit-modal {
  padding: 16px 0;
}

.credit-info {
  margin-bottom: 24px;
}

.reminder-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
}
</style>
